<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://unpkg.com/vue@next"></script>-->
    <script src="../Vue.js"></script>
</head>
<body>

<div id="root">
    <!--输出用户对象-->
    <h3>输出用户对象</h3>
    <ul>
        <li v-for="(a,b) in listUser" :key="a.id">{{a.name}} + {{a.age}} + {{b}}</li>
    </ul>

    <!--添加从input得到的用户输入-->
    <h3>添加用户输入</h3>
    <input type="text" v-model="inputStr" placeholder="010">
    <button @click="addUl">添加元素</button>
    <ol>
        <li v-for="(a,b) in listInput" :key="b" @click="deleteUl(b)">{{a}}</li>
    </ol>

    <!--监听属性改变-->
    {{inputTimes}}
</div>

<script>
    new Vue({
        el: '#root',
        data: {
            listUser: [{
                id: 1,
                name: 'zs',
                age: 12
            }, {
                id: 2,
                name: 'ls',
                age: 13
            }, {
                id: 3,
                name: 'wu',
                age: 18
            }, {
                id: 4,
                name: 'gz',
                age: 32
            }],
            listInput:[
            ],
            inputStr:'',
            inputTimes:0
        },
        methods:{
            addUl:function () {
                if (this.inputStr=='') this.inputStr='010';
                this.listInput.push(this.inputStr);
                this.inputStr = '';
            },
            deleteUl:function (index) {
                this.listInput.splice(index,1)
            }
        },
        watch:{
            inputStr: function () {
                this.inputTimes++;
            }
        }
    })
</script>
</body>
</html>